<!-- 水位监测 -->
<template>
  <div class='page2'>
    <Border title="实时水情（中大型水库）">
      <template>
        <img src="@/assets/imgs/msg.png" alt="">
        <div class="">更多</div>
      </template>
      <template #content>
        <div class="list">
          <div class="headers">
            <span class="item1">站名</span>
            <span class="item2">水位<sub>（m）</sub></span>
            <span class="item3">汛限<sub>（m）</sub></span>
            <span class="item4">时间</span>
          </div>
          <ul>
            <li class="list_item_box" v-for="(item,index) in list" :key="index" @click="showJk(item)">
              <span class="item1 slh" :title="item.name">{{item.name}}</span>
              <span class="item2">{{item.sw}}</span>
              <span class="item3">{{item.xx}}</span>
              <span class="item4">{{item.time}}</span>
            </li>
          </ul>
        </div>
      </template>
    </Border>
  </div>
</template>

<script>
import Border from "@/components/border"
export default {
  data() {
    return {
      list: [
        {
          name: '林公山水库',
          sw: '45.92',
          xx: '45.36',
          time: '10:10:10',
          url:
            "http://113.214.1.50:7086/live/cameraid/1000012%24436/substream/1.m3u8",
          xy: [118.559947, 29.242109],
        },
        {
          name: '昙华寺水力发电站',
          sw: '52.92',
          xx: '35.36',
          time: '10:10:10',
          url:
            "",
          xy: [118.601626, 29.182742],
        },
        {
          name: '林源水力发电站',
          sw: '12.92',
          xx: '40.36',
          time: '10:10:10',
          url:
            "",
          xy: [118.601826, 29.182762],
        },
        {
          name: '利平水力发电站',
          sw: '36.92',
          xx: '52.36',
          time: '10:10:10',
          url:
            "",
          xy: [118.457248, 29.103431],
        },
        {
          name: '林溪水力发电站..',
          sw: '33.92',
          xx: '49.36',
          time: '10:10:10',
          url:
            "",
          xy: [118.24706083707175, 29.158673849576978],
        },
      ]
    };
  },

  components: { Border },

  computed: {},

  created() { },

  mounted() { },

  methods: {
    showJk(obj) {
      this.$parent.showJk(obj)
    }
  }
}

</script>
<style lang='less' scoped>
.page2 {
  padding-top: 20px;
  .list {
    height: 700px;
    padding: 10px;
    font-size: 14px;
    ul {
      height: calc(100% - 30px);
      overflow: auto;
    }
    .headers,
    .list_item_box {
      display: flex;
      line-height: 30px;
    }
    .list_item_box:nth-child(odd) {
      background-color: rgba(0, 0, 0, 0.2);
    }
    .item1 {
      width: 33%;
      text-align: center;
    }
    .item2,
    .item3,
    .item4 {
      width: 22%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .boxsss {
    .footer {
      display: flex;
      margin-top: 20px;
      justify-content: flex-end;
      button {
        cursor: pointer;
        width: 83px;
        background: url("~@/assets/imgs/yulan.png") left bottom no-repeat;
        height: 33px;
        background-size: 100% 100%;
        border: none;
        color: #5ee5ff;
        padding-left: 40px;
      }
    }
    .video_box {
      position: absolute;
      left: 101%;
      top: 0;
      img {
        width: 500px;
      }
    }
  }
}
</style>